<template>
  <div class="course-catalogue" :class="isMobile ? 'mobile-course-catalogue' : ''">
    <div v-show="!isMobile">
      <div class="catalogue-top">
        <div class="top-item">
          <div class="title">首页<span class="bar">/</span><span class="name">{{ detailInfo.name }}</span></div>
          <div class="cover">
            <div class="cover-wrap">
              <img :src="detailInfo.coverUrl">
              <div v-show="detailInfo.trainFlag" class="status-total">
                <span class="status-label" v-show="detailInfo.trainFlag === 1">未培训</span>
                <span class="status-label training" v-show="detailInfo.trainFlag === 2">培训中</span>
                <span class="status-label trained" v-show="detailInfo.trainFlag === 3">已培训</span>
              </div>
              <div v-show="detailInfo.studyFlag" class="status-total">
                <span class="status-label" v-show="detailInfo.studyFlag === 1">未学习</span>
                <span class="status-label training" v-show="detailInfo.studyFlag === 2">学习中</span>
                <span class="status-label trained" v-show="detailInfo.studyFlag === 3">已学习</span>
              </div>
            </div>
            <div class="cover-introduce">
              <div class="cover-title">{{ detailInfo.name }}</div>
              <div class="people flex-b-c">
                <div class="people-studied">
                <span class="people-icon">
                  <span class="people-name">
                    <i class="el-icon-user-solid"></i>
                    {{ (detailInfo.lecturerDTO && detailInfo.lecturerDTO.lecturerName) ? detailInfo.lecturerDTO.lecturerName : '' }}
                  </span>{{ detailInfo.numberLearner }}人学习过
                </span>
                </div>
                <div class="course-total">共<span>{{ (detailInfo.schedules && detailInfo.schedules.length) ? detailInfo.schedules.length : '' }}</span>节课</div>
              </div>
              <div class="upload-time"><label>上传时间</label>{{ ($moment(detailInfo.pushTime).format('YYYY-MM-DD HH:mm:ss')) }}</div>
              <div class="upload-time" v-show="detailInfo.trainFlag"><label>培训开始/截止时间</label>
                {{ $moment(startTime).format('YYYY-MM-DD HH:mm:ss') }} - {{ $moment(endTime).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
              <div class="study-btn">
                <span class="study can-click" @click="nowStudy()">立即学习</span>
                <div>
                  <span class="collect can-click" v-show="detailInfo.collectFlag === 1 || detailInfo.collectFlag === 0" @click="collect(2)"><i class="el-icon-star-off"></i>收藏</span>
                  <span class="collected can-click" v-show="detailInfo.collectFlag === 2" @click="collect(1)"><i class="el-icon-star-on"></i>已收藏</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="catalogue-bottom">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="catalogue-tab">
          <el-tab-pane v-for="(item, i) in tabList" :key="'tab-' + i" :label="item.label" :name="item.name"></el-tab-pane>
        </el-tabs>
        <div v-show="activeName === '1'" class="introduce">
          <div class="course-introduce">
            <div class="text">课程介绍</div>
            <div class="content" v-html="detailInfo.descContent"></div>
          </div>
          <div class="course-introduce">
            <div class="text teacher-text">讲师介绍</div>
            <div class="teacher">
              <div class="teacher-img"><img :src="(detailInfo.lecturerDTO && detailInfo.lecturerDTO.picUrl) ? detailInfo.lecturerDTO.picUrl : ''"></div>
              <div class="teacher-introduce">
                <div class="name">{{ (detailInfo.lecturerDTO && detailInfo.lecturerDTO.lecturerName) ? detailInfo.lecturerDTO.lecturerName : '' }}</div>
                <div class="teacher-introduce-text" v-html="(detailInfo.lecturerDTO && detailInfo.lecturerDTO.remark) ? detailInfo.lecturerDTO.remark : ''"></div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="activeName === '2'" class="course-wrap">
          <div class="course-list" :class="{'active': isActive}">
            <div class="course-item" v-for="(item,i) in detailInfo.schedules" :key="'course-' + i">
              <div class="name">{{ i+1 }}、{{ item.name }}</div>
              <div class="time">{{ Math.round(Number(item.duration)/60) }}分钟</div>
            </div>
            <span class="more" v-show="!isActive" @click="seeMore">查看更多 <i class="el-icon-arrow-down"></i></span>
            <span class="more" v-show="isActive" @click="seeMore">收起 <i class="el-icon-arrow-up"></i></span>
          </div>
        </div>
        <div v-show="activeName === '3'" class="course-wrap">
          <div class="evaluate-item" v-for="(item, i) in evaluateList" :key="'a-' + i">
            <div class="evaluate-people">
              <div class="img-wrap"><img :src="item.userPic"></div>
              <div class="name-time">
                <div class="name">{{ item.userName }}</div>
                <div class="time">{{ $moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
              </div>
            </div>
            <div class="evaluate-content">{{ item.comments }}</div>
          </div>
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="currentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-show="isMobile">
      <div class="mobile-catalogue">
        <div class="mobile-img">
          <div class="back">
            <x-svg-icon class="back-icon" name="arrow_back" @click="back"></x-svg-icon>
          </div>
          <img :src="detailInfo.coverUrl">
        </div>
        <div class="mobile-detail">
          <div class="title">{{ detailInfo.name }}</div>
          <div class="people-study">
            <div class="wrap">
              <div class="icon-people"><x-svg-icon name="my"></x-svg-icon>{{ (detailInfo.lecturerDTO && detailInfo.lecturerDTO.lecturerName) ? detailInfo.lecturerDTO.lecturerName : '' }}</div>
              <div class="people-studied">{{ detailInfo.numberLearner }}人学习过</div>
            </div>
            <div class="course-num">共<span class="num">{{ (detailInfo.schedules && detailInfo.schedules.length) ? detailInfo.schedules.length : '' }}</span>节课</div>
          </div>
          <div class="push-time">
            <div class="left">{{ ($moment(detailInfo.pushTime).format('YYYY-MM-DD HH:mm:ss')) }}</div>
            <div class="right" v-show="detailInfo.trainFlag">培训截止时间：{{ $moment(detailInfo.trainEndTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <van-tabs v-model="mobileTab" class="mobile-tab">
            <van-tab v-for="(item, i) in mobileTabList" :key="`tab-${i}`" :title="item.title">
              <!--介绍-->
              <div v-show="mobileTab === 0">
                <div class="mobile-course-introduce">
                  <div class="introduce-text">课程介绍</div>
                  <div class="introduce-wrap">
                    <div class="introduce-wrap-text" :class="{'active': mobileIsActive}" v-html="detailInfo.descContent" id="introduceWrap"></div>
                    <div class="see-more" @click="mobileSeeMore()" v-show="!mobileIsActive">查看更多<x-svg-icon name="arrow2down"></x-svg-icon></div>
                  </div>
                </div>
                <div class="mobile-course-introduce">
                  <div class="introduce-text mobile-teacher-img">
                    <div class="img">
                      <img :src="(detailInfo.lecturerDTO && detailInfo.lecturerDTO.picUrl) ? detailInfo.lecturerDTO.picUrl : ''">
                    </div>
                    <div class="name">
                      <div class="name-wrap-text">{{ (detailInfo.lecturerDTO && detailInfo.lecturerDTO.lecturerName) ? detailInfo.lecturerDTO.lecturerName : '' }}</div>
                      <!--<div class="teacher-title">资深讲师</div>-->
                    </div>
                  </div>
                  <div class="introduce-wrap" v-html="(detailInfo.lecturerDTO && detailInfo.lecturerDTO.remark) ? detailInfo.lecturerDTO.remark : ''"></div>
                </div>
              </div>
              <!--目录-->
              <div v-show="mobileTab === 1">
                <div class="mobile-catalogue-text">课程目录</div>
                <div class="mobile-catalogue-wrap" :class="{'active': mobileCatalogueActive}">
                  <div v-for="(item, i) in detailInfo.schedules" :key="`wrap${i}`" class="catalogue-item">
                    <div class="name">{{ item.name }}</div>
                    <div class="time">{{ Math.round(Number(item.duration)/60) }}分钟</div>
                  </div>
                  <div class="see-more" @click="mobileCourseSeeMore()" v-show="!mobileCatalogueActive">查看更多<x-svg-icon name="arrow2down"></x-svg-icon></div>
                </div>
              </div>
              <!--评价-->
              <div v-show="mobileTab === 2">
                <div class="mobile-catalogue-text mobile-evaluate">
                  <span>学员评价（{{ total }}）</span>
                  <span class="see-all" @click="seeAllEvaluate">查看全部</span>
                </div>
                <div>
                  <div class="mobile-course-introduce" v-for="(item, i) in evaluateList" :key="`evaluateItem${i}`">
                    <div class="introduce-text mobile-teacher-img" style="padding-top: 0">
                      <div class="img">
                        <img :src="item.userPic">
                      </div>
                      <div class="name">
                        <div class="name-wrap-text">{{ item.userName }}</div>
                        <div class="teacher-title">{{ item.createTime }}</div>
                      </div>
                    </div>
                    <div class="evaluate-text">{{ item.comments }}</div>
                  </div>
                  <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="currentChange" :prev-text="prevText" :next-text="nextText" />
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="mobile-collect">
        <div class="left-btn-1" v-show="detailInfo.collectFlag === 1 || detailInfo.collectFlag === 0" @click="collect(2)">
          <x-svg-icon name="collectline"></x-svg-icon>收藏
        </div>
        <div class="left-btn-2" v-show="detailInfo.collectFlag === 2" @click="collect(1)">
          <x-svg-icon name="collect"></x-svg-icon>已收藏
        </div>
        <div class="now-study" @click="nowStudy()">立即学习</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "courseCatalogue",
    data(){
      return {
        tabList: [
          {
            label: '介绍',
            name: '1',
          },
          {
            label: '目录',
            name: '2',
          },
          {
            label: '课程评价',
            name: '3',
          }
        ],
        activeName: '1',
        isActive: false,
        evaluateList: [],
        courseId: this.$route.query.id, // 课程id
        startTime: this.$route.query.startTime ? this.$route.query.startTime : null, // 培训开始时间
        endTime: this.$route.query.endTime ? this.$route.query.endTime : null, // 培训结束时间
        detailInfo: {},
        currentPage: 1,
        pageSize: 10,
        total: 0,
        isMobile: false,
        mobileTab: 0,
        mobileTabList: [
          {
            title: '介绍'
          },
          {
            title: '目录'
          },
          {
            title: '评价'
          }
        ],
        mobileIsActive: false,
        mobileCatalogueActive: false,
        prevText: '<',
        nextText: '>',
      }
    },
    created(){
      if(this.Common.isMobile()){
        this.isMobile = true;
      }else {
        this.isMobile = false;
      }
      // 获取详情
      this.getDetail();
      // 获取评论
      this.pageCourseComment();
    },
    methods: {
      /**
       * 获取详情
       **/
      getDetail(){
        this.Request.getCourseDetail({
          params: {
            userId: sessionStorage.userId,
            courseId: this.courseId,
          },
          success: res => {
            this.detailInfo = res;
          }
        })
      },
      /**
       * 获取评论列表
       **/
      async pageCourseComment(){
        const { data, total } = await this.Request.pageCourseComment({
          params: {
            courseId: this.courseId,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          },
        });
        this.evaluateList = data;
        this.total = total;
        this.tabList[2].label = `课程评价（${total}）`
      },
      handleClick(){},
      seeMore(){
        this.isActive = !this.isActive;
      },
      mobileSeeMore(){
        this.mobileIsActive = !this.mobileIsActive;
      },
      mobileCourseSeeMore(){
        this.mobileCatalogueActive = !this.mobileCatalogueActive;
      },
      /**
       * 评价分页
       **/
      currentChange(val){
        this.currentPage = val;
        this.pageCourseComment();
      },
      /**
       * 跳转学习页面
       **/
      nowStudy(){
        if(this.detailInfo.trainStartTime > this.$moment().valueOf()){
          this.$message.error('请在时间开始后进行培训');
          return;
        }
        this.$router.push({
          name: 'courseDetail',
          query: { id: this.courseId },
        })
      },
      /**
       * 查看全部评价
       **/
      seeAllEvaluate(){
        this.$router.push({
          name: 'allEvaluate',
          query: { id: this.courseId },
        })
      },
      /**
       * 点击收藏
       **/
      async collect(val){
        let { status } = await this.Request.updateCourseCollect({
          params: {
            userId: sessionStorage.userId,
            courseId: this.courseId,
            collectFlag: val,
          }
        });
        if(status.code === 200){
          this.detailInfo.collectFlag = val;
        }else {
          this.$message.warning(status.msg)
        }
      },
      back(){
        this.$router.go(-1)
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../css/module/courseCatalogue";
</style>
